<!-- 友情链接 -->
<template>
  <div class="grid">
    <div class="col-12">
      <CommonHeaderToolBar />
    </div>
    <div class="col-2">
      <LeftMenu />
    </div>
    <div class="col-3 flex justify-content-center" v-for="(friendlies, index) of friendlyList" :key="ul-`${index}`">
      <ul class="friendly__link">
        <li class="mt-2"
            :class="{'mt-3': index === 0}"
            v-for="(item, index) of friendlies"
            :key="item.linkSrc + item.linkUrl">
          <div class="flex justify-content-center align-items-center align-content-center">
            <div class="friendly__link__img">
              <img :src="item.linkSrc" width="32"/>
            </div>
            <div class="friendly__link__href">
              <a :href="item.linkUrl" target="_blank">{{item.linkName}}</a>
            </div>
          </div>
          <div v-if="index !== friendlies.length -1"  class="flex justify-content-center align-items-center align-content-center">
            <EasyContentDivider root-class="friendly__divider" style="width: 10px !important;"></EasyContentDivider>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
/** JS */
import {ref, Ref, onMounted} from 'vue';
import {FriendlyService} from '@/utils/ApiRequest';
import {FriendlyLinkEntity} from '@/interface/link/friendly/entity/FriendlyLinkEntity';
/** 组件 */
import CommonHeaderToolBar from '@/components/toolbar/CommonHeaderToolBar.vue';
import LeftMenu from '@/components/menu/LeftMenu.vue';
import EasyContentDivider from '@/components/aids/EasyContentDivider.vue';
const friendlyService = new FriendlyService();

const friendlyList: Ref<[FriendlyLinkEntity[]]> = ref([]);
onMounted(async () => {
  let res = await friendlyService.list();
  if (res) {
    let friendlies = res.data;
    while (friendlies.length >= 9 && friendlies.length < 27) {
      let temp: FriendlyLinkEntity[] = friendlies.splice(0, 9);
      friendlyList.value.push(temp);
    }
    friendlyList.value.push(friendlies);
  }
})
</script>
<style lang="less" scoped>
.friendly__link {
  width: 70%;
  list-style: none;
  margin-block: 0;
  padding-inline: 0;
  background-color: white;
}

.friendly__link__img {
  display: inline-block !important;
  margin-right: 10px;
}

.friendly__link__href {
  display: inline-block !important;
  margin-left: 10px;
  &:hover {
    a {
      color: red;
    }
  }
  a {
    text-decoration: none;
    transition: .15s
  }
}



</style>
